(function(){
  var uls = document.querySelector(".list_ul");
  var videoUl = document.querySelector(".video_fr_ul");
  var videoFr = document.querySelectorAll(".video_fr>div");
  var videoTopFr = document.querySelectorAll(".video_fr_top div");
  var catalogueDetails = document.querySelectorAll(".catalogueDetails div");
  var courseVideo_top = document.querySelectorAll(".courseVideo .main > div");
  var discuss_list = document.querySelector(".discuss_list .list>ul");
  //点击展示列表或评论
  videoTopFr[0].style.color = "#fff";
  videoTopFr[0].style.background = "#80C4AE";
  videoTopFr[0].onclick = function () {
    videoTopFr[0].style.background = "#80C4AE";
    videoTopFr[1].style.background = "";
    videoTopFr[0].style.color = "#fff";
    videoTopFr[1].style.color = "";
    videoFr[1].style.display = "block";
    videoFr[2].style.display = "none";
  };
  videoTopFr[1].onclick = function () {
    videoTopFr[1].style.background = "#80C4AE";
    videoTopFr[0].style.background = "";
    videoFr[1].style.display = "none";
    videoFr[2].style.display = "block";
    videoTopFr[0].style.color = "";
    videoTopFr[1].style.color = "#fff";
  };
  catalogueDetails[0].style.color = "#fff";
  catalogueDetails[0].style.background = "#80C4AE";
  catalogueDetails[0].onclick = function () {
    courseVideo_top[1].style.display = "block";
    courseVideo_top[2].style.display = "none";
    catalogueDetails[0].style.color = "#fff";
    catalogueDetails[0].style.background = "#80C4AE";
    catalogueDetails[1].style.color = "#333";
    catalogueDetails[1].style.background = "";
  };
  catalogueDetails[1].onclick = function () {
    courseVideo_top[1].style.display = "none";
    courseVideo_top[2].style.display = "block";
    catalogueDetails[0].style.color = "#333";
    catalogueDetails[0].style.background = "";
    catalogueDetails[1].style.color = "#fff";
    catalogueDetails[1].style.background = "#80C4AE";
  };

  //渲染详情视频列表
  var content = "";
  for (var i = 0; i < classList.length; i++) {
    content += `<li>
    <h2>${classList[i].title}<i class=" icon icon-sanjiaoxing"></i> </h2>
    <div class="list_item">
        <ul>`;
    for (var j = 0; j < classList[i].list.length; j++) {
      var data = classList[i].list[j];
      content += `<li>
              <a href="javascript:void(0)" class="clearfix">
                <div class="fl icon icon-24gf-playCircle"></div>
                <div class="fl">${data.name}</div>
                <div class="fl">已学完</div>
                <div class="fr">${data.time}</div>
                <span class="start fr" src="${data.src}">播放视频</span>
              </a>
            </li>`;
    }
    content += `</ul>
     </div>
    </li>`;
  }
  uls.innerHTML = content;

  var content1 = "";
  for (var i = 0; i < classList.length; i++) {
    content1 += `<li><h2>${classList[i].title}</h2><ul class="video_fr_ul_item">`;
    for (var j = 0; j < classList[i].list.length; j++) {
      var data = classList[i].list[j];
      content1 += `<li src="${data.src}">
            <a href="javascript:void(0)">${data.name}
              <i class="icon icon-24gf-playCircle"></i>
            </a>
          </li>`;
    }
    content1 += `</ul></li>`;
  }
  videoUl.innerHTML = content1;
  var iElem = document.querySelectorAll(".courseVideo_list > ul > li > h2 > i");
  var items = document.querySelectorAll(".list_ul > li>div");
  var lis = document.querySelectorAll(".list_ul > li>div li a");

  for (var i = 0; i < iElem.length; i++) {
    //点击展示、隐藏视频列表
    iElem[i].index = i;
    iElem[i].tag = false;
    iElem[i].onclick = function () {
      this.tag = !this.tag;
      if (this.tag) {
        this.className = "icon icon-sanjiaoxing_shang";
        items[this.index].style.display = "block";
      } else {
        this.className = "icon icon-sanjiaoxing";
        items[this.index].style.display = "none";
      }
    };
  }
  for (var i = 0; i < lis.length; i++) {
    //鼠标经过显示播放按钮
    lis[i].index = i;
    lis[i].onmouseover = function () {
      this.children[3].style.display = "none";
      this.children[4].style.display = "block";
    };
    lis[i].onmouseout = function () {
      this.children[3].style.display = "block";
      this.children[4].style.display = "none";
    };
    var video = document.querySelector("video");
    // 点击播放按钮
    lis[i].children[4].onclick = function () {
      if (localStorage.getItem("isLogin") != "true") {
        alert("请先登录!");
        var logon_register = document.querySelector(".logon_register"); //遮挡层
        logon_register.style.display = "block";
        var logon2 = document.querySelector(".logon"); //登录层
        var register2 = document.querySelector(".register"); //注册层
        register2.style.display = "none";
        logon2.style.display = "block";
      } else {
        video.src = this.getAttribute("src");
        document.documentElement.scrollTop = 0;
      }
    };
  }
  var vli = document.querySelectorAll(".video_fr_ul_item li");
  for (var i = 0; i < vli.length; i++) {
    vli[i].onclick = function () {
      video.src = this.getAttribute("src");
    };
  }
  video.addEventListener(
    "ended",
    function () {
      //监听到播放结束后，在此处可调用自己的接口
      for (var i = 0; i < lis.length; i++) {
        if (lis[i].children[4].getAttribute("src") == this.src) {
          lis[i].children[2].style.display = "block";
        }
      }
    },
    false
  );
  //点击展开全部
  var unfold = document.querySelector(".unfold a");
  var list_item = document.querySelectorAll(".list_ul li .list_item");
  var show = false;
  unfold.onclick = function () {
    show = !show;
    if (show) {
      for (var i = 0; i < list_item.length; i++) {
        list_item[i].style.display = "block";
      }
      unfold.innerHTML = "点击收起全部";
    } else {
      for (var i = 0; i < list_item.length; i++) {
        list_item[i].style.display = "none";
      }
      unfold.innerHTML = "点击展开查看全部";
    }
  };
  //渲染评论列表
  var content1 = "";
  var comment = commentList;
  for (var i = 0; i < comment.length; i++) {
    content1 += `<li>
    <div class="item">
      <div class="lf">
        <img src="${comment[i].src}" alt="">
        <span>${comment[i].name}</span>
      </div>
      <span>${comment[i].time}</span>
    </div>
    <p>${comment[i].content}</p>
  </li>`;
  }
  discuss_list.innerHTML = content1;
  //发布评论
  var textarea = document.querySelector(".discuss_list textarea");
  var textareaBtn = document.querySelector(".discuss_list button");
  textareaBtn.onclick = function () {
    if (textarea.value == "") {
      alert("请输入内容!");
    } else {
      var obj = {
        name: "哈哈哈哈",
        time: "21:12",
        src: "../img/login/user.png",
        content: textarea.value,
      };
      // comment =
      comment.unshift(obj);
      var content1 = "";
      for (var i = 0; i < comment.length; i++) {
        content1 += `<li>
    <div class="item">
      <div class="lf">
        <img src="${comment[i].src}" alt="">
        <span>${comment[i].name}</span>
      </div>
      <span>${comment[i].time}</span>
    </div>
    <p>${comment[i].content}</p>
  </li>`;
      }
      discuss_list.innerHTML = content1;
      textarea.value = "";
    }
  };
})()